<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渲染简单的三维地图</title>
    <!-- 引入公共 CSS 文件 -->
    <link rel="stylesheet" href="../css/common.css">
    <!--引入cesium基础lib-->
    <link rel="stylesheet" href="../lib/Cesium/Widgets/widgets.css">
    <script>
        window.CESIUM_BASE_URL = "http://mars3d.cn/lib/Cesium/" //非必须，如jsp、asp.net等非html框架报错时建议取消注释
    </script>
    <script src="../../lib/Cesium/Cesium.js"></script>
    <script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script>
    <!--引入mars3d库lib-->
    <link rel="stylesheet" href="../../lib//mars3d/mars3d.css">
    <script src="../../lib/mars3d//mars3d.js"></script>
    <!--引入mars3d库插件lib（按需引入）-->
    <script src="../../lib/mars3d//plugins/space/mars3d-space.js"></script>
    <style>
        .mars3d-container div canvas {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 为 Mars3D 准备一个定义了宽高的 DOM -->
    <div id="mars3dContainer" class="mars3d-container"></div>

    <script>
        /**
         * 渲染一个三维地图需要准备什么？
         * 1.引入相关类库
         * 2.创建一个放置三维地图的容器
         * 3.new mars3d.Map 的实例，该实例有两个参数，
         *      3.1.第一个是放置该容器的 id
         *      3.2.该三位地图的配置（后续会了解到）
         * */ 
        var map = new mars3d.Map('mars3dContainer', {
            layers: [
                {
                    "id": 1,
                    "type": "geojson",
                    "name": "示例数据",
                    "url": "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
                    "popup": "{name}",
                    "show": true
                },
                {
                    "id": 2,
                    "type": "geojson",
                    "name": "示例数据",
                    "url": "https://geo.datav.aliyun.com/areas_v3/bound/140000_full.json",
                    "popup": "{name}",
                    "show": true
                },
            ],
            basemaps: [
                {
                    name: "tms_world",
                    type: "wmts",
                    show: true,
                    url: 'http://192.168.1.251:8089/freexserver/htc/service/wmts',
                    layer: 'tms_world',
                    style: "",
                    format: "image/png",
                    tileMatrixSetID: 'EPSG:4326',
                    tileMatrixLabels: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3',
                        'EPSG:4326:4',
                        'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9',
                        'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13',
                        'EPSG:4326:14',
                        'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18',
                        'EPSG:4326:19',
                        'EPSG:4326:20', 'EPSG:4326:21'
                    ],
                    maximumLevel: 21,
                    tilingScheme: new Cesium.GeographicTilingScheme(),
                },
            ],
        })
    </script>
</body>

</html>